<template>
    <div class="login-box">
        <h2>集成工作台</h2>
        <ul class="login-types">
            <li :class="{active: loginType === 1}" @click="changeLoginType(1)">密码登录</li>
            <li :class="{active: loginType === 2}" @click="changeLoginType(2)">验证码登录</li>
        </ul>
        <div class="pass-login" :class="{none: loginType !== 1}"> <!-- 用户名密码登录 -->
            <el-form ref="pwdForm" label-position="top" :model="pwdForm" :rules="pwdFormRules" hide-required-asterisk class="cus-login-form">
                <el-form-item label="手机号/邮箱" prop="username">
                    <el-input v-model="pwdForm.username" placeholder="请输入手机号/邮箱"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="pwdForm.pwd" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="cus-login-btn" type="primary" style="width: 100%;" @click="pwdFormSubmit">登录</el-button>
                </el-form-item>
            </el-form>
            <div class="bottom-link">
                <router-link to="/resetPassword" style="color: rgba(1,2,43,1); text-decoration: none">忘记密码？</router-link>
            </div>
        </div>
        <div class="phone-login" :class="{none: loginType !== 2}"> <!-- 手机验证码登录 -->
            <!-- <button class="vali-code-title">获取验证码</button> -->
            <el-form ref="mobileForm" label-position="top" :model="mobileForm" hide-required-asterisk :rules="mobileFormRules" class="cus-login-form">
                <el-form-item label="手机号码" prop="username">
                    <el-input v-model="mobileForm.username" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="validateCode">
                    <el-input v-model="mobileForm.validateCode" placeholder="请输入验证码" maxlength="4" style="display: inline-block; width: 230px; margin-right: 10px;"></el-input>
                    <el-button plain style="height: auto; padding-top: 15px; padding-bottom: 15px; font-size: 16px;">获取验证码</el-button>                    
                </el-form-item>
                <el-form-item label="">
                    <el-button class="cus-login-btn" type="primary" style="width: 100%;" @click="mobileFormSubmit">登录</el-button>
                </el-form-item>
            </el-form>           
        </div>
    </div>
</template>

<script>
    export default {
        name: 'loginMain',
        data() {
            return {
                loginType: 1, // 登录类型： 1- 用户名+密码登录， 2-手机号+验证码登录
                pwdForm: { // 用户名密码登录表单
                    username: '',
                    pwd: '',
                    loginType: 1 // 表示密码登录
                },
                pwdFormRules: {
                    username: [
                        { required: true, message: '手机号/邮箱不能为空', trigger: 'change' },
                        { pattern: /^(1[3-9]\d{9})|(([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: '手机号/邮箱格式不正确', trigger: 'change' }
                    ],
                    pwd: [
                        { required: true, message: '密码不能为空', trigger: 'change' },
                        { min: 8, max: 20, pattern: /(((?=.*[0-9])(?=.*[@$%&*#_+-]))|((?=.*[a-zA-Z])(?=.*[@$%&*#_+-])))^[0-9a-zA-Z@$%&*#_+-]{8,20}$/, message: '请输入8-20位字母、数字或特殊字符的组合', trigger: 'change' }
                    ]
                },
                mobileForm: { // 手机号+验证码登录表单
                    username: '',
                    validateCode: '',
                    loginType: 2 // 表示验证码登录
                },
                mobileFormRules: {
                    username: [
                        { required: true, message: '手机号不能为空', trigger: 'change' },
                        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'change' }
                    ],
                    validateCode: [
                        { required: true, message: '验证码不能为空', trigger: 'change' },
                        { min: 4, max: 4, pattern: /^\d{4}$/, message: '验证码不正确' }
                    ]
                }
            }
        },
        methods: {
            changeLoginType(type) { // 更改登录方式                
                if (type === 1) {
                    this.$refs.pwdForm.resetFields();
                } else if (type === 2) {
                    this.$refs.mobileForm.resetFields();
                }
                this.loginType = type;
            },
            pwdFormSubmit() { // 手机号/邮箱 + 密码登录提交
                this.$refs.pwdForm.validate(valid => {
                    console.log(valid)
                })
            },
            mobileFormSubmit() {
                this.$refs.mobileForm.validate(valid => {
                    console.log(valid)
                })
            }
        }
    }
</script>

<style lang="scss">
.login-box {
    background-color: rgba(233, 235, 238, .8);
    border-radius: 10px;
    padding: 54px 56px 55px 58px;
    box-sizing: border-box;
    height: 514px; // 给个固定高度，防止切换登录方式时有抖动
    > h2 {
        font-size: 30px;
        font-weight: 400;
        text-align: center;
        color: #051b33;
        line-height: 31px;
        letter-spacing: 2px;
    }
    .login-types {
        display: flex;
        width: 272px;
        margin: 40px auto 22px;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -8px;
            width: 1px;
            background-color: #bfbfbf;
            height: 16px;
        }
        li {
            flex: 1;
            cursor: pointer;
            font-size: 16px;
            padding: 0 24px;
            color: rgba(5,27,51,.5);
            &:first-child {
                text-align: right;
            }
            &.active {
                color: #555;
            }
        }
    }
    .phone-login {
        position: relative;
        .vali-code-title {
            position: absolute;
            right: 0;
            top: -4px;
            text-decoration: none;
            color: rgba(2,122,255,1);
            font-size: 16px;
            font-weight: 500;
            border: none;
            background: none;
            cursor: pointer;
            &:focus {
                outline: none;
            }
            &.disabled {
                cursor: default;

            }
        }
    }
    .bottom-link {
        text-align: right;
    }
}
.cus-login-form {
    &.el-form--label-top {
        .el-form-item__label {
            font-size: 16px;
            font-weight: 500;
            color: #666;
            line-height: 16px;
        }
    }
    .el-input__inner {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
    }
}
.cus-login-btn {
    &.el-button--primary {
        height: auto;
        font-size: 18px;
        background-color: rgba(2,122,255,1);
        border-color: rgba(2,122,255,1);
        padding-top: 14px;
        padding-bottom: 14px;
        margin-top: 20px;
        box-shadow: 0px 2px 3px 0px rgba(101,141,199,0.4);
        &:hover {
            background-color: darken(rgba(2,122,255,1), 3%);
            border-color: darken(rgba(2,122,255,1), 3%);
        }
    }
} 
</style>